<template>
  <div class="page-main">
    <query-page
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      title="采购订单变更查询"
      :total="total"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #operate="{ record, rowIndex }">
        <a-button
          v-permission="['pms:order-change-detail:page1']"
          type="text"
          @click="details(record, rowIndex)"
        >
          详情
        </a-button>
      </template>
    </query-page>
    <!-- 列表详情 -->

    <detailsList
      v-if="showModal"
      ref="moduleRef"
      v-model:show-modal="showModal"
      @refresh="refresh"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  // import { Modal, Message } from '@arco-design/web-vue';

  import {
    formRenderConfig,
    formComponentConfig,
  } from '@/views/purchase-order/components/formComp/baseFormConfigAlterationInquire';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/purchase-order/components/tableComp/baseTableConfigAlterationInquire';
  import { pageDateList } from '@/api/purchase-order/alterationInquire';
  import useModal from '@/common/hooks/modal';
  // import PageTitle from '@/common/components/title/page-title.vue';
  import { baseRenderKeys } from './baseRenderData';
  import detailsList from './details/index.vue';

  const selectedKeys = ref([]);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const total = ref(0);
  const moduleRef = ref();
  const selection = ref<any[]>([]);

  // 渲染检索项
  const formRenderKeys = ref<any[]>([
    ...baseRenderKeys.finishedProduct.formRenderKeys,
  ]);

  //  上面的表格 当前表格要渲染哪些值
  const tableRenderKeys = ref<any[]>([
    ...baseRenderKeys.finishedProduct.upTableRenderKeys,
  ]);

  // 表单选中的数据
  // let selectList = reactive<string[]>([]);
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
    // selectList = val;
    selection.value = renderData.value.filter((item) => {
      console.log(item, 'item++++++++++++');
      return val.includes(item.id);
    });
    console.log(selection, 'selectionChange');
  };
  // 添加弹框的事件
  const { showModal, openModal } = useModal();
  const details = (rowDate: object, index: number) => {
    console.log(rowDate, 'rowDate+++详情');
    console.log(index, 'index+++详情');
    openModal();
    nextTick(() => {
      moduleRef.value.init(rowDate);
    });
  };
  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo++pageDateList', queryInfo);
    try {
      const res = (await pageDateList({
        params: {
          ...queryInfo,
        },
      })) as any;
      if (res.code === 200) {
        total.value = res.data.total;
        renderData.value = res.data.list;
      }
    } finally {
      isLoading.value = false;
    }
  };

  const refresh = () => {
    showModal.value = false;
    getData();
  };
  onMounted(() => {});
</script>

<style lang="less" scoped>
  .purchase-order-alteration-inquire-container {
    height: 100%;
    margin: 16px;
    padding: 12px 24px;
    background-color: #fff;
    border-radius: 8px;

    :deep(.header-con) {
      margin-bottom: 8px;
    }
  }
</style>
